import { Layout } from "@arco-design/web-react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { Loading } from "@jiaminghi/data-view-react";

import HomeSidebar from "./home/sidebar";
import HomeCanvas from "./home/canvas";
import HomeProperty from "./home/property";
import { EditorGlobalContext } from "./consts";
import { useInitEditorGlobalData } from "./utils/hooks";
import { useState } from "react";

const Sider = Layout.Sider;
const Header = Layout.Header;
const Footer = Layout.Footer;
const Content = Layout.Content;

const EditorIndex = () => {
	const { panelConfig, gEditorConfig } = useInitEditorGlobalData();

	const [editorPageInfo, setEditorPageInfo] = useState({
		uuid: "",
		type: "page",
		name: "home",
		version: "1.0.0",
		group: "",
		createTime: "",
		props: {
			x: 0,
			y: 0,
			w: 800,
			h: 600,
			title: "默认首页",
			description: "这是一个默认的首页",
			isDefaultHome: true
		},
		body: []
	});

	const [selectedItems, setSelectedItems] = useState([]);

	return (
		<div className="layout-basic-editor">
			{gEditorConfig === undefined ? (
				<div className="editor-loading">
					<Loading>编辑器初始化中...</Loading>
				</div>
			) : (
				<EditorGlobalContext.Provider value={{ gEditorConfig, editorPageInfo, setEditorPageInfo, selectedItems, setSelectedItems }}>
					<Layout style={{ height: "100vh" }}>
						<Header style={{ height: "48px", lineHeight: "48px" }}></Header>
						<DndProvider backend={HTML5Backend}>
							<Layout className={"arco-layout arco-layout-has-sider"}>
								<HomeSidebar panelConfig={panelConfig}></HomeSidebar>
								<Content>
									<HomeCanvas></HomeCanvas>
								</Content>
								<Sider className={"arco-layout-sider-right"} style={{ width: "250px" }}>
									<HomeProperty></HomeProperty>
								</Sider>
							</Layout>
						</DndProvider>
						<Footer style={{ height: "48px", lineHeight: "48px", color: "#000" }}>CopyRight ©Winring</Footer>
					</Layout>
				</EditorGlobalContext.Provider>
			)}

			<style global jsx>{`
				body {
					user-select: none;
					overflow: hidden;
				}

				.layout-basic-editor .editor-loading {
					height: 100vh;
				}

				.layout-basic-editor .arco-layout-header,
				.layout-basic-editor .arco-layout-footer,
				.layout-basic-editor .arco-layout-sider,
				.layout-basic-editor .arco-layout-sider-children,
				.layout-basic-editor .arco-layout-content {
					color: var(--color-white);
					text-align: center;
					font-stretch: condensed;
					font-size: 16px;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.layout-basic-editor .arco-layout-header,
				.layout-basic-editor .arco-layout-footer {
					height: 64px;
					background: #fff;
					border-bottom: solid 1px #efeff5;
					z-index: 99;
				}

				.layout-basic-editor .arco-layout-footer {
					border-bottom: 0;
					border-top: solid 1px #efeff5;
				}

				.layout-basic-editor .arco-layout-sider {
					width: 206px;
					box-shadow: none;
					border-right: solid 1px #efeff5;
				}

				.layout-basic-editor .arco-layout-content {
					box-shadow: none;
				}

				.layout-basic-editor .arco-layout-sider-right {
					border-left: solid 1px #efeff5;
				}
			`}</style>
		</div>
	);
};

export default EditorIndex;
